<template>
  <div class="options-container">
    <div class="header">
      <div class="title-section">
        <h1>
          <span class="icon">📋</span>
          Sytable - 智能自动填表浏览器扩展
        </h1>
        <p class="subtitle">基于 OCR 技术的智能表单填写工具</p>
      </div>
    </div>

    <div class="content">
      <div class="section">
        <h2>✨ 主要功能</h2>
        <ul class="feature-list">
          <li><span class="emoji">🖼️</span> <strong>图片上传识别</strong>：支持拖拽或点击上传图片文件</li>
          <li><span class="emoji">🔍</span> <strong>OCR 文字识别</strong>：自动识别图片中的文字信息</li>
          <li><span class="emoji">📝</span> <strong>智能表单填写</strong>：根据识别结果自动填写网页表单字段</li>
          <li><span class="emoji">🎯</span> <strong>多格式支持</strong>：支持 PNG、JPG、JPEG、GIF、TIFF 等图片格式</li>
          <li><span class="emoji">📊</span> <strong>实时进度显示</strong>：上传和识别过程可视化进度条</li>
          <li><span class="emoji">🔄</span> <strong>双版本兼容</strong>：同时支持 Manifest V2 和 V3</li>
        </ul>
      </div>

      <div class="section">
        <h2>🎯 适用场景</h2>
        <div class="scenario-grid">
          <div class="scenario-card">
            <h3>🚗 车辆相关表单</h3>
            <p>车主姓名、车牌号、车辆类型等信息填写</p>
          </div>
          <div class="scenario-card">
            <h3>📄 证件信息录入</h3>
            <p>驾驶证号、许可证号等证件信息处理</p>
          </div>
          <div class="scenario-card">
            <h3>📊 批量表单处理</h3>
            <p>大量重复性表单的快速处理</p>
          </div>
          <div class="scenario-card">
            <h3>⚡ 数据录入工作</h3>
            <p>提高重复性数据录入工作效率</p>
          </div>
        </div>
      </div>

      <div class="section">
        <h2>🛠️ 技术架构</h2>
        <div class="tech-stack">
          <div class="tech-category">
            <h3>核心技术栈</h3>
            <ul>
              <li><strong>框架</strong>：Plasmo（浏览器扩展开发框架）</li>
              <li><strong>前端</strong>：Vue 3 + TypeScript</li>
              <li><strong>样式</strong>：CSS + Tailwind CSS</li>
              <li><strong>构建工具</strong>：Vite</li>
              <li><strong>图标库</strong>：Font Awesome</li>
            </ul>
          </div>
        </div>
      </div>

      <div class="section">
        <h2>🔧 支持的表单字段</h2>
        <div class="fields-grid">
          <div class="field-item">车主姓名 (ownerName)</div>
          <div class="field-item">车牌号 (vehicleNo)</div>
          <div class="field-item">车辆类型 (vehicleType)</div>
          <div class="field-item">申请类型 (applicationType)</div>
          <div class="field-item">驾驶证号 (licenseNo)</div>
          <div class="field-item">运输许可证号 (driverLicenseNo)</div>
          <div class="field-item">车主意见 (ownerOpinion)</div>
          <div class="field-item">区队意见 (districtOpinion)</div>
          <div class="field-item">交通意见 (trafficOpinion)</div>
        </div>
      </div>

      <div class="section">
        <h2>📋 权限说明</h2>
        <div class="permissions">
          <div class="permission-item">
            <strong>activeTab</strong>：访问当前活动标签页
          </div>
          <div class="permission-item">
            <strong>scripting</strong>：注入脚本到网页
          </div>
          <div class="permission-item">
            <strong>runtime</strong>：扩展运行时通信
          </div>
          <div class="permission-item">
            <strong>https://*/*</strong> 和 <strong>http://*/*</strong>：访问所有网站
          </div>
        </div>
      </div>

      <div class="section">
        <h2>🔄 版本兼容性</h2>
        <div class="version-comparison">
          <div class="version-card recommended">
            <h3>Manifest V3 (推荐)</h3>
            <ul>
              <li>使用 Service Worker</li>
              <li>更严格的安全策略</li>
              <li>未来浏览器的标准</li>
            </ul>
          </div>
          <div class="version-card">
            <h3>Manifest V2</h3>
            <ul>
              <li>使用持久后台页面</li>
              <li>兼容旧版浏览器</li>
              <li>逐步被淘汰</li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <footer class="footer">
      <p>本项目由 @yeti 开发，基于 Plasmo 框架构建</p>
      <p>
        更多信息请参考 
        <a href="https://docs.plasmo.com/" target="_blank">Plasmo 官方文档</a>
      </p>
    </footer>
  </div>
</template>

<script setup lang="ts">
// Options页面展示README内容，无需复杂逻辑
</script>

<style scoped>
.options-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  color: #333;
  background: #f8fafc;
  min-height: 100vh;
}

.header {
  background: linear-gradient(135deg, #1081E1 0%, #0066cc 100%);
  color: white;
  padding: 40px 20px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(16, 129, 225, 0.3);
}

.title-section h1 {
  margin: 0 0 10px 0;
  font-size: 2.5em;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.icon {
  font-size: 1.2em;
}

.subtitle {
  margin: 0;
  font-size: 1.2em;
  opacity: 0.9;
  font-weight: 300;
}

.content {
  padding: 40px 20px;
}

.section {
  background: white;
  margin-bottom: 30px;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  border: 1px solid #e2e8f0;
}

.section h2 {
  margin: 0 0 20px 0;
  font-size: 1.8em;
  color: #1081E1;
  font-weight: 600;
  border-bottom: 2px solid #e2e8f0;
  padding-bottom: 10px;
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-list li {
  padding: 12px 0;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.feature-list li:last-child {
  border-bottom: none;
}

.emoji {
  font-size: 1.2em;
  flex-shrink: 0;
}

.scenario-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.scenario-card {
  background: #f8fafc;
  padding: 20px;
  border-radius: 8px;
  border-left: 4px solid #1081E1;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.scenario-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.scenario-card h3 {
  margin: 0 0 10px 0;
  color: #1081E1;
  font-size: 1.1em;
}

.scenario-card p {
  margin: 0;
  color: #64748b;
  font-size: 0.95em;
}

.tech-stack {
  background: #f8fafc;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.tech-category h3 {
  margin: 0 0 15px 0;
  color: #1081E1;
  font-size: 1.2em;
}

.tech-category ul {
  margin: 0;
  padding-left: 20px;
}

.tech-category li {
  margin-bottom: 8px;
  color: #475569;
}

.fields-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.field-item {
  background: #f1f5f9;
  padding: 12px 16px;
  border-radius: 6px;
  font-family: 'Monaco', 'Menlo', monospace;
  font-size: 0.9em;
  border-left: 3px solid #1081E1;
  transition: background-color 0.2s ease;
}

.field-item:hover {
  background: #e2e8f0;
}

.permissions {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.permission-item {
  background: #fef7cd;
  padding: 15px;
  border-radius: 6px;
  border-left: 4px solid #f59e0b;
  font-size: 0.95em;
}

.version-comparison {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.version-card {
  background: #f8fafc;
  padding: 20px;
  border-radius: 8px;
  border: 2px solid #e2e8f0;
  transition: border-color 0.2s ease;
}

.version-card.recommended {
  border-color: #10b981;
  background: #f0fdf4;
}

.version-card h3 {
  margin: 0 0 15px 0;
  color: #1081E1;
  font-size: 1.2em;
}

.version-card.recommended h3 {
  color: #10b981;
}

.version-card ul {
  margin: 0;
  padding-left: 20px;
}

.version-card li {
  margin-bottom: 8px;
  color: #475569;
}

.footer {
  background: #1e293b;
  color: white;
  padding: 30px 20px;
  text-align: center;
  margin-top: 40px;
}

.footer p {
  margin: 8px 0;
  opacity: 0.9;
}

.footer a {
  color: #60a5fa;
  text-decoration: none;
  font-weight: 500;
}

.footer a:hover {
  color: #93c5fd;
  text-decoration: underline;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .header {
    padding: 30px 15px;
  }
  
  .title-section h1 {
    font-size: 2em;
    flex-direction: column;
    gap: 8px;
  }
  
  .content {
    padding: 20px 15px;
  }
  
  .section {
    padding: 20px;
  }
  
  .scenario-grid,
  .version-comparison {
    grid-template-columns: 1fr;
  }
  
  .fields-grid {
    grid-template-columns: 1fr;
  }
}
</style>
